<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>添加茶叶</title>

</head>
<body>
<h3>添加茶叶</h3>
<form action="" method="post">
    茶叶名称：<input id="teaName" name="teaName"><br>
    茶叶类别：<input id="teaTypeId" name="teaTypeId"><br>
    排序：<input id="ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
    状态：
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

    <input type="button" id="btn" value="提交">
</form>


<script src="./js/axios.min.js"></script>
<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        // 将表单数据转为json
        var formData = {
            teaName: "",
            teaTypeId: "",
            ordered: "",
            description: "",
            status: "",
        };
        // 获取表单数据
        let teaName = document.getElementById("teaName").value;
        // 设置数据
        formData.teaName = teaName;

        // 获取表单数据
        let teaTypeId = document.getElementById("teaTypeId").value;
        // 设置数据
        formData.teaTypeId = teaTypeId;

        // 获取表单数据
        let ordered = document.getElementById("ordered").value;
        // 设置数据
        formData.ordered = ordered;

        // 获取表单数据
        let description = document.getElementById("description").value;
        // 设置数据
        formData.description = description;

        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if (status[i].checked) {
                formData.status = status[i].value;
            }
        }
        console.log(formData);
        console.log(JSON.stringify(formData));
        //2. 发送ajax请求
        axios({
            method: "post",
            url: "/JMS2301_01_Mybatis_war/tea/add",
            data: formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if (resp.data == "success") {
                location.href = "./index.html";
            }
        })
    }
</script>
</body>
</html>